<template>
  <div class="personal-container">
    <div class="main-content">
      <!-- 左侧导航 -->
      <el-card class="nav-card">
        <!-- 个人信息部分 -->
        <div class="user-info">
          <el-avatar :size="80" :src="fileBaseUrl() +userStore.userInfo.avatarUrl"></el-avatar>
          <div class="user-details">
            <h2>{{ userStore.userInfo.name }}</h2>
            <p class="user-level">会员等级：{{ userStore.userInfo.level }}</p>
          </div>
          <!-- <div class="user-stats">
            <div class="stat-item">
              <span class="number">{{ userStore.userInfo.points }}</span>
              <span class="label">积分</span>
            </div>
            <div class="stat-item">
              <span class="number">{{ userStore.userInfo.coupons }}</span>
              <span class="label">优惠券</span>
            </div>
            <div class="stat-item">
              <span class="number">{{ userStore.userInfo.favorites }}</span>
              <span class="label">收藏</span>
            </div>
          </div> -->
        </div>
        <!-- 导航菜单 -->
        <el-menu
          :default-active="activeMenu"
          class="personal-menu"
          router>
          <el-menu-item index="/personal/orders">
            <el-icon><Document /></el-icon>
            <span>我的订单</span>
          </el-menu-item>
          <el-menu-item index="/personal/address">
            <el-icon><Location /></el-icon>
            <span>收货地址</span>
          </el-menu-item>
          <el-menu-item index="/personal/favorites">
            <el-icon><Star /></el-icon>
            <span>我的收藏</span>
          </el-menu-item>
          <el-menu-item index="/personal/settings">
            <el-icon><Setting /></el-icon>
            <span>账号设置</span>
          </el-menu-item>
        </el-menu>
      </el-card>

      <!-- 右侧内容区 -->
      <el-card class="content-card">
        <router-view></router-view>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Document, Location, Star, Setting } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/userStore'
import {fileBaseUrl} from '@/apis/files'


const userStore = useUserStore()
const route = useRoute()
const router = useRouter()

const activeMenu = computed(() => {
  return route.path
})

onMounted(() => {
  // 如果当前路径是 /personal，重定向到 /personal/orders
  if (route.path === '/personal') {
    router.push('/personal/orders')
  }
})
</script>

<style scoped>
.personal-container {
  padding: 10px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 65px);
}

.main-content {
  display: flex;
  gap: 20px;
}

.nav-card {
  width: 280px;
  height: calc(100vh - 100px);
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  margin-right: 0;
}

.user-info {
  padding: 20px;
  border-bottom: 1px solid #ebeef5;
  text-align: center;
}

.user-details {
  margin: 15px 0;
}

.user-details h2 {
  margin: 0;
  font-size: 20px;
  color: #303133;
}

.user-level {
  color: #909399;
  margin: 5px 0 0;
  font-size: 14px;
}

.user-stats {
  display: flex;
  justify-content: space-around;
  padding: 15px 0 0;
}

.stat-item {
  text-align: center;
}

.stat-item .number {
  display: block;
  font-size: 20px;
  color: #409EFF;
  font-weight: bold;
}

.stat-item .label {
  color: #909399;
  font-size: 12px;
}

.personal-menu {
  border-right: none;
  flex: 1;
}

.content-card {
  flex: 1;
  height: calc(100vh - 100px);
  overflow-y: auto;
  margin-left: 0;
}
</style>
